<template>
  <div>
    <div v-for="val in userInfo">
      <p>{{val}}</p>
    </div>



    <Button @click="test()">测试</Button>
  </div>
</template>

<script>
export default {
  name: "cycle-obj",
  data() {
    return {
      userInfo: {
        name: 'whh',
        age: 1,
        sex: 'woman',
      },
    }
  },
  methods:{
    test(){
      //使用 Vue.set(object, key, value) 方法：
      //Vue 不能检测对象属性的添加或删除，直接进行 app.userInfo.height='180cm' 这样操作是不会构成响应式，不会触发视图更新。
      // 必须使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
      //使用对象方法时，要想触发视图更新，常常需要使用 Vue.set()去操作。
      //在cli 中 this.$set() 等价于 Vue.set()

      this.$set(this.userInfo,'height','170cm');
    }
  }
}
</script>

<style scoped>

</style>
